<template>
  <div>
    <nav-header></nav-header>

    <div>
      <div class="nav-breadcrumb-wrap">
        <div class="container">
          <!--面包屑插槽-->
          <nav-bread>
            <span>My Cart</span>
          </nav-bread>
        </div>
      </div>
      <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
           xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <symbol id="icon-add" viewBox="0 0 32 32">
            <title>add2</title>
          </symbol>
          <symbol id="icon-ok" viewBox="0 0 32 32">
            <title>ok</title>
          </symbol>
          <symbol id="icon-edit" viewBox="0 0 32 32">
            <title>edit</title>
          </symbol>
          <symbol id="icon-del" viewBox="0 0 32 32">
            <title>delete</title>
          </symbol>
          <symbol id="icon-clock" viewBox="0 0 32 32">
            <title>clock</title>
          </symbol>
        </defs>
      </svg>
      <div class="container">
        <div class="cart">
          <div class="page-title-normal">
            <h2 class="page-title-h2"><span>My Cart</span></h2>
          </div>
          <div class="item-list-wrap">
            <div class="cart-item">
              <div class="cart-item-head">
                <ul>
                  <li>Items</li>
                  <li>Price</li>
                  <li>Quantity</li>
                  <li>Subtotal</li>
                  <li>Edit</li>
                </ul>
              </div>
              <ul class="cart-item-list">

                <li v-for="(item,i) in cartList" :key="i">
                  <div class="cart-tab-1">
                    <div class="cart-item-check">
                      <a href="#" class="checkbox-btn item-check-btn" :class="{'check':item.checked==true}" @click.prevent="addNum('checked',item)">
                        <svg class="icon icon-ok">
                          <use xlink:href="#icon-ok"></use>
                        </svg>
                      </a>
                    </div>
                    <div class="cart-item-pic">
                      <img :src="'static/'+item.productImage">
                    </div>
                    <div class="cart-item-title">
                      <div class="item-name">{{ item.productName }}</div>
                    </div>
                  </div>
                  <div class="cart-tab-2">
                    <div class="item-price">{{ item.salePrice | currency('$') }}</div>
                  </div>
                  <div class="cart-tab-3">
                    <div class="item-quantity">
                      <div class="select-self select-self-open">
                        <a class="input-sub" @click="addNum('minu',item)" v-show="show">-</a>
                        <span class="select-ipt">{{ item.productNum }}</span>
                        <a class="input-add" @click="addNum('add',item)">+</a>
                      </div>
                    </div>
                  </div>
                  <div class="cart-tab-4">
                    <div class="item-price-total">{{ item.productNum*item.salePrice | currency('$')}}</div>
                  </div>
                  <div class="cart-tab-5">
                    <div class="cart-item-opration">
                      <a href="javascript:;" class="item-edit-btn" @click="delCartConfirm(item)">删除</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="cart-foot-wrap">
            <div class="cart-foot-inner">
              <div class="cart-foot-l">
                <div class="item-all-check">
                  <a href="#" @click.prevent="toggleCheckAll">
                  <span class="checkbox-btn item-check-btn" :class="{'check':checkAllFlag}">
                  </span>
                    <span>Select all</span>
                  </a>
                </div>
              </div>
              <div class="cart-foot-r">
                <div class="item-total">
                  Item total: <span class="total-price">{{ totalPrice | currency('$') }}</span>
                </div>
                <div class="btn-wrap">
                  <a class="btn btn--red" :class="{'btn--dis':checkCount===0}" @click="checkOut">Checkout</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Modal :mdShow="modalConfirm" @close="closeModal">
      <p slot="message">确定删除此数据吗?</p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="modalConfirm = false">关闭</a>
        <a class="btn btn--m" href="javascript:;" @click="delCart">确认</a>
      </div>
    </Modal>

    <nav-footer></nav-footer>
  </div>

</template>

<script>
  import '../assets/css/checkout.css';
  import NavHeader from '../components/Header.vue';
  import NavFooter from '../components/Footer.vue';
  import NavBread from '../components/Bread.vue';
  import Modal from '../components/Modal.vue';

  export default {
    data() {
      return {
        cartList: [],
        modalConfirm: false,
        productId: '', //商品id
        // checkAllFlag : false,//全部选中
        show : true,
        item : '',
      }
    },
    mounted() {
      this.getCartList();
    },
    computed :{
      //计算是否全选
      checkAllFlag(){
        return this.checkCount === this.cartList.length;
      },
      checkCount(){
        let count = 0;
        this.cartList.forEach(item=>{
          if (item.checked) count++;
        });
        return count; //选中的数量
      },
      //计算总价
      totalPrice(){
        let money = 0;
        this.cartList.forEach(item=>{
          if (item.checked){
            money += parseInt(item.productNum) * parseFloat(item.salePrice);
          }
        });
        return money;
      },
    },
    methods: {
      //获取购物车列表
      getCartList() {
        this.$http.get('/user/cartList').then(response => {
          let res = response.body;
          if (res.status === 0) {
            this.cartList = res.result;
          }
        });
      },
      //删除购物车
      delCartConfirm(item) {
        this.modalConfirm = true; //显示框
        this.item = item;
      },
      //确认删除
      delCart() {
        this.$http.post('/user/delCart', {
          params: {
            productId: this.item.productId,
          }
        }).then(response => {
          let res = response.data;
          console.log(res);
          if (res.status === 0) {
            this.modalConfirm = false;
            this.getCartList();
            this.$store.commit('updateCartCount',-this.item.productNum);
            console.log(this.$store.getters.getCartCount);
          }
        });
        this.modalConfirm = false;
      },
      closeModal() {
        this.modalConfirm = false;
      },
      //增减数量
      addNum(flag,item){
        let changeNum = 0;
        if (flag == 'minu'){
          if (item.productNum <=1){
            return;
          }
          item.productNum --;
          changeNum = -1;
        }else if (flag == 'add') {
          item.productNum ++;
          changeNum = 1;
        } else {
           item.checked = item.checked!==true;

        }
        this.$store.commit('updateCartCount',changeNum);
        this.$http.post('/user/cartEdit',{
          params : {
            productId : item.productId,
            productNum : item.productNum,
            checked : item.checked,
          }
        }).then(response=>{
            let res = response.data;
            if (res.status === 0){

            }
        });
      },
      //全部选中
      toggleCheckAll(){
        let flag = !this.checkAllFlag;
        this.cartList.forEach((item,i)=>{
          item.checked = flag;
        });
        this.$http.post('/user/cartCheckAll',{
          params : {
            checkAll : flag,
          }
        }).then(response=>{
            let res = response.data;
            if (res.status === 0){

            }
        });
      },
      checkOut(){
        if (this.checkCount > 0){
          this.$router.push({
            path : '/address',
          })
        }
      },
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Modal,
    },
  }
</script>

<style lang="less" scoped>
  .cart-item-list .cart-tab-3 {
    padding-top: 59px;
  }

  .select-self {
    font-size: 22px;
  }

  .btn-wrap {
    a:hover {
      background-color: #ffe5e6;
    }
  }
</style>
